"Text Over Image(responsive)"
Bootstrap 3.0.0 Snippet by Manish Yadav

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="item">
<img src="https://placeimg.com/640/480/any" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/640/480/rand" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-left">
<h2 class="item--title item--title-left">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/640/480/rando" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-right">
<h2 class="item--title item--title-right">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
position: relative;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
width: 90%;
max-width: 90rem;
margin: 5rem auto;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.item {
display: block;
width: 100%;
overflow: hidden;
border: 2px solid #676767;
margin: 3rem auto;
font-size: 1rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard PRO
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
Image Crop jQuery

Questions / Comments: